<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <!--
            渲染角色列表
            checkbox 标签内容如果无,就用 label 属性值作为按钮后介绍
            当 CheckBox 选中时,会把 label 的值添加到 v-model数组里,如果未选中,就会从数组里移除
         -->
         <el-checkbox-group v-model="checkList">
            <el-checkbox  v-for="item in assignRoleList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="24" style="text-align: center;margin-top: 20px;">
        <el-button type="info" size="mini" @click="cancelFn">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmFn">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'AsyncRoleDialog',
  props: {
    assignRoleList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
        checkList: [], // 复选框被选中时相对应的值会存储到这里
    }
  },
  created(){},
  mounted(){},
  methods: {
    cancelFn(){
      this.$emit('update:show',false)
      this.checkList = []
    },
    confirmFn(){
      this.$emit('update:show',false)
      this.$emit('setEmployeeFn',this.checkList)
      this.checkList = []
    },
  },
  computed: {},
  components: {}
}
</script>
<style lang="less" scope>

</style>
